<template>
  <div class="app-container">
    <basics-form
      :minWidth="'300px'"
      ref="basicsForm"
      :actionLoading="loading"
      @actionBtnsClick="actionBtnsClick"
      @submit="search"
    />
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column  label="姓名">
        <template slot-scope="scope">
            <span style="cursor: pointer;color:#409EFF"  @click="goMyPatient(scope.row.patientId)">{{
              scope.row.name
            }}</span>
          </template>
        </el-table-column>
      <el-table-column prop="telphone" label="手机号"  width="150"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          <span>{{
            scope.row.sex == 1 ? "男" : scope.row.sex == 0 ? "女" : "未知"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="diseaseCategory" label="患者病类"  width="180"></el-table-column>
      <el-table-column prop="testDate" label="测量时间" width="180"></el-table-column>
      <el-table-column label="收缩压(mmHg)">
        <template slot-scope="scope">
          <div :style="{ fontSize: scope.row.isSbpAbnormal?'20px':'' ,color: scope.row.isSbpAbnormal ? colors[scope.row.sbpAbnormalLevel] : '' }">{{
            scope.row.sbp
          }}</div>
        </template>
      </el-table-column>
      <el-table-column label="舒张压(mmHg)">
        <template slot-scope="scope">
          <div :style="{fontSize: scope.row.isDbpAbnormal?'20px':''  , color:  scope.row.isDbpAbnormal ? colors[scope.row.dbpAbnormalLevel] : '' }">{{
            scope.row.dbp
          }}</div>
        </template>
      </el-table-column>

      <el-table-column label="脉搏(次/分)">
        <template slot-scope="scope">
          {{ scope.row.hr }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="$refs.basicsForm.formValid()"
    />
  </div>
</template>

<script>
import BasicsForm from "@/components/BasicsForm";
import { patientBloodPressureTestList } from "@/api/manbing/patient";
import {
    bloodPressureTestList
  } from "@/api/manbing/screen";
export default {
  name: "patient-table",
  components: { BasicsForm },
  data() {
    return {
      colors:['#409EFF','rgb(253,154,1)','red'],//警告颜色
      loading: false,
      tableLoading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        warnType:-1
      },
      tableData: [],
    };
  },
  created() {},
  methods: {
    init() {
      this.tableData=[]
      this.queryParams.warnType=-1
      this.queryParams.pageNum=1
      this.$nextTick(() => {
        this.initRules();
        this.getList();
      });
    },
    //顶部搜索组件
    initRules() {
      let rules = [
        {
          title: "类型",
          key: "warnType",
          type: "select",
          selectList:[
            {name:'全部',value:-1},
            {name:'正常',value:0},
            {name:'轻度异常',value:1},
            {name:'一般预警',value:2},
            {name:'中级预警',value:3},
            {name:'严重预警',value:4},
          ],
          value:0,
          selectKey:'value',
          hiddenClose:true,
          skip: true,
        },
        {
          type: "actionBtns",
          selectList: [{ name: "搜索", value: "primary" }],
          ruleWidth: "auto",
        },
      ];
      this.$refs.basicsForm.initForm(rules);
    },
    //顶部按钮点击
    actionBtnsClick(index) {
      this.queryParams.pageNum = 1;
      this.$refs.basicsForm.formValid();
    },
    //搜索
    search(param) {
      if (!param) {
        return;
      }
      this.queryParams.warnType=param.warnType
      this.getList();
    },
    //列表数据
    getList() {
      this.loading = true;
      this.tableLoading = true;
      bloodPressureTestList(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
          }
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    },
    //前往我的患者
    goMyPatient(value){
      this.$emit('closeTestView')
      this.$router.push('/manbing/patient?patientId='+value)
    }
  },
};
</script>
